<template>
    <div>
        <!--编辑Dialog-->
        <el-dialog :visible.sync="editDialog" :fullscreen="isFullScreen" :modal="false">
            <!-- 标题区域slot  -->
            <template #title>
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">新 增</span>
                    <i class="el-icon-full-screen avue-crud__dialog__menu" @click="isFullScreen = !isFullScreen"></i>
                </div>
            </template>
            <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "EditFormNext",
    props: {
        rule: {
            type: Array | Object,
            default: () => []
        }
    },
    data() {
        return {
            isFullScreen: false,
            editDialog: false,
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //组件参数配置
            option: {
                resetBtn: true,
                //表单提交事件
                onSubmit: this.save
            },
        };
    },
    methods: {
        save(formData) {
            this.$emit('onSave', formData)
            //this.value = {}
            this.fApi.reload()
        }
    },
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avue-crud__dialog__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .avue-crud__dialog__menu {
        padding-right: 20px;
    }
}
</style>